<template>
  <div class="container">
    <el-row type="flex">
      <el-col :span="24" style="display: flex">
        <span style="padding: 10px 10px 0 0">查询条件:</span>
        <div style="flex: 1">
          <el-select
            @change="handleCityChange"
            v-model="queryInfo.districtcode"
            placeholder="请选择"
            clearable
            multiple
            collapse-tags
            :disabled="isdisabled"
          >
            <el-option
              v-for="item in regionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-cascader
            clearable
            placeholder="请选择单位业态"
            v-model="queryInfo.bodyindustryChecked"
            :options="bodyindustryList"
            @change="onCascaderChange"
            :props="{
              checkStrictly: true,
            }"
          ></el-cascader>

          <el-select
            style="width: 230px"
            multiple
            collapse-tags
            v-model="queryInfo.unittype"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in unittypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="queryInfo.isspecialfood"
            placeholder="请选择特殊食品"
            clearable
            class="selectwidth"
          >
            <el-option
              v-for="item in isspecialfoodList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-date-picker
            unlink-panels
            style="width: 350px; margin-right: 10px"
            v-model="time"
            type="daterange"
            range-separator="至"
            start-placeholder="注册开始日期"
            end-placeholder="注册结束日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyyMMdd"
            @change="onchange"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
          <el-input
                maxlength="50"
            v-model="queryInfo.searchValue"
            placeholder="请输入单位名称"
            style="width: 280px"
          ></el-input>
        </div>
      </el-col>
    </el-row>
    <rz-height></rz-height>
    <el-row type="flex">
      <el-col :span="24" style="display: flex">
        <span style="padding: 10px 10px 0 0">统计维度:</span>
        <div style="flex: 1; display: flex; align-items: flex-end">
          <el-checkbox-group
          :min="1"
            v-model="queryInfo.groups"
          >
            <el-checkbox
              v-for="city in Company"
              :label="city.value"
              :key="city.label"
              >{{ city.label }}</el-checkbox
            >
          </el-checkbox-group>
          <!-- 223 -->
          <!-- <el-select
            v-model="queryInfo.groups[0]"
            placeholder="请选择"
            class="selectwidth"
          >
            <el-option
              v-for="item in Company.filter(
                (x, index) =>
                  queryInfo.groups[1] != x.value &&
                  queryInfo.groups[2] != x.value
              )"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="queryInfo.groups[1]"
            placeholder="请选择"
            clearable
            class="selectwidth"
          >
            <el-option
              v-for="item in Company.filter(
                (x, index) =>
                  queryInfo.groups[2] != x.value &&
                  queryInfo.groups[0] != x.value
              )"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="queryInfo.groups[2]"
            placeholder="请选择"
            clearable
            class="selectwidth"
          >
            <el-option
              v-for="item in Company.filter(
                (x, index) =>
                  queryInfo.groups[1] != x.value &&
                  queryInfo.groups[0] != x.value
              )"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
        </div>
      </el-col>
    </el-row>
    <rz-height></rz-height>

    <el-row type="flex">
      <el-col :span="24" style="display: flex">
        <span style="padding: 10px 10px 0 0">统计口径:</span>
        <div style="flex: 1; display: flex; align-items: center">
          <el-checkbox-group
           :min="1"
            v-model="queryInfo.responsegroups"
            style="margin-right: 10px"
          >
            <el-checkbox
              v-for="city in dimension"
              :label="city.value"
              :key="city.label"
              >{{ city.label }}</el-checkbox
            >
          </el-checkbox-group>
          <!-- <el-select
            v-model="queryInfo.responsegroups[0]"
            placeholder="请选择"
            class="selectwidth"
          >
            <el-option
              v-for="item in dimension.filter(
                (x, index) =>
                  queryInfo.responsegroups[3] != x.value &&
                  queryInfo.responsegroups[4] != x.value &&
                  queryInfo.responsegroups[1] != x.value &&
                  queryInfo.responsegroups[2] != x.value
              )"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="queryInfo.responsegroups[1]"
            placeholder="请选择"
            clearable
            class="selectwidth"
          >
            <el-option
              v-for="item in dimension.filter(
                (x, index) =>
                  queryInfo.responsegroups[3] != x.value &&
                  queryInfo.responsegroups[4] != x.value &&
                  queryInfo.responsegroups[0] != x.value &&
                  queryInfo.responsegroups[2] != x.value
              )"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="queryInfo.responsegroups[2]"
            placeholder="请选择"
            clearable
            class="selectwidth"
          >
            <el-option
              v-for="item in dimension.filter(
                (x, index) =>
                  queryInfo.responsegroups[3] != x.value &&
                  queryInfo.responsegroups[4] != x.value &&
                  queryInfo.responsegroups[1] != x.value &&
                  queryInfo.responsegroups[0] != x.value
              )"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="queryInfo.responsegroups[3]"
            placeholder="请选择"
            clearable
            class="selectwidth"
          >
            <el-option
              v-for="item in dimension.filter(
                (x, index) =>
                  queryInfo.responsegroups[2] != x.value &&
                  queryInfo.responsegroups[4] != x.value &&
                  queryInfo.responsegroups[1] != x.value &&
                  queryInfo.responsegroups[0] != x.value
              )"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="queryInfo.responsegroups[4]"
            placeholder="请选择"
            clearable
            class="selectwidth"
          >
            <el-option
              v-for="item in dimension.filter(
                (x, index) =>
                  queryInfo.responsegroups[2] != x.value &&
                  queryInfo.responsegroups[3] != x.value &&
                  queryInfo.responsegroups[1] != x.value &&
                  queryInfo.responsegroups[0] != x.value
              )"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="onserch"
            v-no-click
            >查询</el-button
          >
          <el-button @click="download">导出Excel</el-button>
          <!-- <download-excel
            class="export-excel-wrapper"
            :data="json_data"
            :fields="json_fields"
            name="filename.xls"
          >
            上面可以自定义自己的样式，还可以引用其他组件button
            <el-button type="primary" size="small">导出EXCEL</el-button> 
         
          </download-excel> -->
        </div>
      </el-col>
    </el-row>
    <rz-height></rz-height>
    <el-table
      :key="key"
      show-summary
      :data="tableData"
      border
      style="width: 100%"
      :summary-method="getSummaries"
    >
      <!-- groupsarr:[],
    responsegroupsarr:[] -->
      <el-table-column
        prop="weidu1"
        :label="Company[0].label"
        v-if="groupsarr.some((x) => x == 1)"
      >
      </el-table-column>
      <el-table-column
        prop="weidu2"
        :label="Company[1].label"
        v-if="groupsarr.some((x) => x == 2)"
      >
      </el-table-column>
      <el-table-column
        width="300"
        prop="weidu3"
        :label="Company[2].label"
        v-if="groupsarr.some((x) => x == 3)"
      >
      </el-table-column>
      <el-table-column
        prop="koujing1"
        label="单位数"
        v-if="responsegroupsarr.some((x) => x == 1)"
      >
      </el-table-column>
      <el-table-column
        prop="koujing2"
        label="从业人员数"
        v-if="responsegroupsarr.some((x) => x == 2)"
      >
      </el-table-column>
      <el-table-column
        prop="koujing3"
        label="食品安全管理员数"
        v-if="responsegroupsarr.some((x) => x == 3)"
      >
      </el-table-column>
      <el-table-column
        prop="koujing4"
        label="绿码数"
        v-if="responsegroupsarr.some((x) => x == 4)"
      >
      </el-table-column>
      <el-table-column
        prop="koujing5"
        label="黄码数"
        v-if="responsegroupsarr.some((x) => x == 5)"
      >
      </el-table-column>
      <el-table-column
        prop="koujing6"
        label="红码数"
        v-if="responsegroupsarr.some((x) => x == 6)"
      >
      </el-table-column>
      <el-table-column
        prop="koujing7"
        label="待完善数"
        v-if="responsegroupsarr.some((x) => x == 7)"
      >
      </el-table-column>
    </el-table>
    <!-- <div class="table">
      <div
        v-for="(item, index) in header"
        :key="item"
        class="header header_title"
        :class="{ td: index == header.findIndex((x) => x == '单位名称') }"
      >
        <div class="title">{{ item }}</div>
        <div
          v-for="(item, indexs) in tableData[index]"
          :key="indexs"
          class="header"
          :title="item"
        >
          <div class="title">{{ item }}</div>
        </div>
      </div>
    </div>
    <div class="table">
      <div
        v-for="(item, index) in totalarr"
        :key="index"
        class="header header_title"
        :class="{ td: index == header.findIndex((x) => x == '单位名称') }"
      >
        <div class="title">{{ item }}</div>
      </div>
    </div> -->
    <div class="paginations">
      <el-pagination
        :current-page.sync="queryInfo.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="20"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <rz-height></rz-height>
  </div>
</template>
<script>
export default {
  // props:[],
  // 页面加载
  created() {
    let code = this.$route.query.code || "320500";
    if (code) {
      this.queryInfo.districtcode = [code];
      this.isdisabled = false;
    } else {
      this.queryInfo.districtcode = [code];
    }
    this.onsubmit();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      isdisabled: true,
      key: 0,
      regionList: [
        {
          value: "320500",
          label: "苏州市",
        },
        {
          value: "320506",
          label: "吴中区",
        },

        {
          value: "320507",
          label: "相城区",
        },
        {
          value: "320505",
          label: "高新区",
        },
        {
          value: "320508",
          label: "姑苏区",
        },
        {
          value: "320509",
          label: "工业园区",
        },
        {
          value: "320581",
          label: "常熟市",
        },
        {
          value: "320582",
          label: "张家港市",
        },
        {
          value: "320583",
          label: "昆山市",
        },
        {
          value: "320584",
          label: "吴江区",
        },
        {
          value: "320585",
          label: "太仓市",
        },
        {
          value: "320592",
          label: "张家港保税区",
        },
      ],
      bodyindustryList: [
        {
          value: "食品生产经营者",
          label: "食品生产经营者",
        },
        // {
        //   value: "食品流通经营者",
        //   label: "食品流通经营者",
        // },
        {
          value: "餐饮服务经营者",
          label: "餐饮服务经营者",
          children: [
            {
              value: "集体用餐配送或中央厨房",
              label: "集体用餐配送或中央厨房",
            },
            {
              value: "特大型餐饮",
              label: "特大型餐饮",
            },
            {
              value: "大型餐饮",
              label: "大型餐饮",
            },
            {
              value: "中型餐饮",
              label: "中型餐饮",
            },
            {
              value: "小型餐饮",
              label: "小型餐饮",
            },
            {
              value: "微型餐饮",
              label: "微型餐饮",
            },
            {
              value: "其他餐饮",
              label: "其他餐饮",
            },
          ],
        },
        {
          value: "单位食堂",
          label: "单位食堂",
          children: [
            {
              value: "幼托机构食堂",
              label: "幼托机构食堂",
            },
            {
              value: "学校食堂",
              label: "学校食堂",
            },
            {
              value: "养老机构食堂",
              label: "养老机构食堂",
            },
            {
              value: "工地食堂",
              label: "工地食堂",
            },
            {
              value: "机关企事业单位食堂",
              label: "机关企事业单位食堂",
            },
            {
              value: "其他食堂",
              label: "其他食堂",
            },
          ],
        },
        {
          value: "食品销售经营者",
          label: "食品销售经营者",
          children: [
            {
              value: "食品批发销售商",
              label: "食品批发销售商",
            },
              {
              value: "食品批发配送商",
              label: "食品批发配送商",
            },
            {
              value: "商场超市",
              label: "商场超市",
            },
            {
              value: "食杂店",
              label: "食杂店",
            },
            
          ],
        },
      ],
      Company: [
        {
          value: "1",
          label: "区域名称",
        },
        {
          value: "2",
          label: "单位业态",
        },
        {
          value: "3",
          label: "单位名称",
        },
      ],
      dimension: [
        {
          value: "1",
          label: "单位数",
        },
        {
          value: "2",
          label: "从业人员数",
        },
        {
          value: "3",
          label: "食品安全管理员数",
        },

        {
          value: "4",
          label: "绿码数",
        },
        {
          value: "5",
          label: "黄码数",
        },
        {
          value: "6",
          label: "红码数",
        },
        {
          value: "7",
          label: "待完善数",
        },
      ],
      unittypeList: [
        {
          value: "从事食用农产品",
          label: "从事食用农产品",
        },
        {
          value: "从事冷藏冷冻农产品",
          label: "从事冷藏冷冻农产品",
        },
      ],
      isspecialfoodList: [
        {
          value: "1",
          label: "特殊食品",
        },
        {
          value: "0",
          label: "非特殊食品",
        },
      ],
      tableData: [],
      queryInfo: {
        bodyindustryChecked: "",
        districtcode: ["320500"],
        bodyindustry: [],
        bodyindustryRemarks: [],
        enddate: "",
        groups: ["1"],
        isPage: 0,
        isspecialfood: "",
        page: 1,
        pageSize: 20,
        responsegroups: ["1", "2", "3", "4", "5"],
        searchValue: "",
        startdate: "",
        unittype: "",
      },
      time: "",
      total: 0,
      groupsarr: ["1"],
      responsegroupsarr: ["1", "2", "3", "4", "5"],
      Totaldata: {},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  // 方法
  methods: {
    onchange(e) {
      if (Array.isArray(e) && e.length == 2) {
        this.queryInfo.startdate = e[0];
        this.queryInfo.enddate = e[1];
      } else {
        this.queryInfo.startdate = "";
        this.queryInfo.enddate = "";
      }
    },
    onserch() {
      this.queryInfo.page = 1;
      this.onsubmit();
    },
    onsubmit() {
      // this.queryInfo.page=1
      let data = _.cloneDeep(this.queryInfo);

      // data.responsegroups = data.responsegroups.filter((x) => x);
      // data.groups = data.groups.filter((x) => x);
      this.$http.findSamplingCompletion(data).then((res) => {
        this.key++;
        this.groupsarr = data.groups;
        this.responsegroupsarr = data.responsegroups;
        // let trarr = [];
        // let data = [
        //   [],
        //   [],
        //   [],
        //   [],
        //   [],
        //   [],
        //   [],
        //   [],
        //   [],
        //   [],
        //   [],
        //   [],
        //   [],
        //   [],
        //   [],
        // ];
        // this.queryInfo.groups
        //   .filter((x) => x)
        //   .map((z) => {
        //     trarr.push(this.Company.filter((x) => x.value == z)[0].label);
        //   });
        // this.queryInfo.responsegroups
        //   .filter((x) => x)
        //   .map((z) => {
        //     trarr.push(this.dimension.filter((x) => x.value == z)[0].label);
        //   });
        // this.header = trarr;
        // console.log(trarr.findIndex((x) => x == "单位名称"));
        // // res.data.filter((x,index)=>{
        // //   // console.log(x);
        // //   if(index<8){
        // //     if(x.koujing1){

        // //     }
        // //   }
        // // })
        // res.data.tableInfolist.map((x, index) => {
        //   if (x.weidu1 !== "null") {
        //     data[0].push(x.weidu1);
        //     console.log(index == res.data.tableInfolist.length - 1);
        //   }
        //   if (x.weidu2 !== "null") {
        //     data[1].push(x.weidu2);
        //   }
        //   if (x.weidu3 !== "null") {
        //     data[2].push(x.weidu3);
        //   }
        //   if (x.koujing1 !== "null") {
        //     data[4].push(x.koujing1);
        //   }
        //   if (x.koujing2 !== "null") {
        //     data[5].push(x.koujing2);
        //   }
        //   if (x.koujing3 !== "null") {
        //     data[6].push(x.koujing3);
        //   }
        //   if (x.koujing4 !== "null") {
        //     data[7].push(x.koujing4);
        //   }
        //   if (x.koujing5 !== "null") {
        //     data[8].push(x.koujing5);
        //   }
        //   if (x.koujing6 !== "null") {
        //     data[9].push(x.koujing6);
        //   }
        //   if (x.koujing7 !== "null") {
        //     data[10].push(x.koujing7);
        //   }
        // });
        // this.tableData = data = data.filter((x) => x.length);
        // this.tableData.map((x) => {});
        // // res.data;
        // console.log(this.tableData);
        // this.total = res.data.totalCount;
        // let totalarr=[]
        // trarr.map((x, index) => {
        //   if (index == 0) {
        //     totalarr.push("合计");
        //   } else {
        //     if(x=="单位数"){
        //       totalarr.push(res.data.companyNum);
        //     }else if(x=="从业人员数"){
        //         totalarr.push(res.data.congyeNum);
        //     }else if(x=="区域名称"){
        //        totalarr.push("--");
        //     }else if(x=="单位类型"){
        //            totalarr.push("--");
        //     }else if(x=="单位类型"){
        //            totalarr.push("--");
        //     }else if(x=="单位名称"){
        //            totalarr.push("--");
        //     }else if(x=="食品安全管理员数"){
        //            totalarr.push(res.data.safeAdminNum);
        //     }else if(x=="红码数"){
        //            totalarr.push(res.data.redNum);
        //     }else if(x=="绿码数"){
        //            totalarr.push(res.data.greenNum);
        //     }else if(x=="黄码数"){
        //            totalarr.push(res.data.yellowNum);
        //     }else if(x=="待完善数"){
        //            totalarr.push(res.data.emptyNum);
        //     }
        //   }
        // });
        // console.log(totalarr);
        // this.totalarr=totalarr
        this.Totaldata = res.data;
        this.tableData = res.data.tableInfolist;
        this.total = res.data.totalCount;
      });
    },
    download() {
      let data = _.cloneDeep(this.queryInfo);
      let url = `${process.env.VUE_APP_DOWNLOAD}/backsupport/exportfindSamplingCompletion?`;
      data.bodyindustry.map((x) => {
        url = url + "bodyindustry" + "=" + x + "&";
      });
      data.districtcode.map((x) => {
        url = url + "districtcode" + "=" + x + "&";
      });
      data.groups.map((x) => {
        url = url + "groups" + "=" + x + "&";
      });
      data.responsegroups.map((x) => {
        url = url + "Responsegroups" + "=" + x + "&";
      });
      console.log(url);
      data.unittype.map((x) => {
        url = url + "unittype" + "=" + x + "&";
      });
      if (data.bodyindustry.length == 0) {
        url = url + "bodyindustry" + "=" + "&";
      }
      if (data.districtcode.length == 0) {
        url = url + "districtcode" + "=" + "&";
      }
      if (data.groups.length == 0) {
        url = url + "groups" + "=" + "&";
      }
      if (data.responsegroups.length == 0) {
        url = url + "Responsegroups" + "=" + "&";
      }
      if (data.unittype.length == 0) {
        url = url + "unittype" + "=" + "&";
      }
      url = url + "enddate" + "=" + data.enddate + "&";
      url = url + "isspecialfood" + "=" + data.isspecialfood + "&";
      url = url + "startdate" + "=" + data.startdate + "&";
      url = url + "searchValue" + "=" + data.searchValue;
      this.$http.findSamplingCompletion(data).then((res) => {
        if (res.data.tableInfolist.length > 0) {
          // const a = document.createElement("a"); // 创建a标签
          // a.setAttribute("download", ""); // download属性
          // a.setAttribute("href", url); // href链接
          // a.click();
          this.$downloadFiles(url);
        } else {
          this.$error("暂无数据");
        }
      });
      // 自执行点击事件
      // this.$http
      //   .exportfindSamplingCompletion(url,{})
      //   .then((res) => {
      //     console.log(res);
      //   })
    },
    handleSizeChange(e) {
      this.queryInfo.pageSize = e;
      this.onsubmit();
    },
    handleCurrentChange(e) {
      this.onsubmit();
    },
    getSummaries(e) {
      let data = [
        ...this.groupsarr.map(
          (z) => this.Company.filter((x) => x.value == z)[0].label
        ),
        ...this.responsegroupsarr.map(
          (z) => this.dimension.filter((x) => x.value == z)[0].label
        ),
      ];
      let total = [];
      if (data.indexOf("区域名称") !== -1) {
        total.push("合计");
      }
      if (data.indexOf("单位业态") !== -1) {
        if (
          this.queryInfo.groups.length == 1 &&
          this.queryInfo.groups.indexOf("2") !== -1
        ) {
          total.push("合计");
        } else {
          total.push("--");
        }
      }
      if (data.indexOf("单位名称") !== -1) {
        if (
          this.queryInfo.groups.length == 1 &&
          this.queryInfo.groups.indexOf("3") !== -1
        ) {
          total.push("合计");
        } else {
          total.push("--");
        }
      }
      if (data.indexOf("单位数") !== -1) {
        total.push(this.Totaldata.companyNum);
      }
      if (data.indexOf("从业人员数") !== -1) {
        total.push(this.Totaldata.congyeNum);
      }
      if (data.indexOf("食品安全管理员数") !== -1) {
        total.push(this.Totaldata.safeAdminNum);
      }

      if (data.indexOf("绿码数") !== -1) {
        total.push(this.Totaldata.greenNum);
      }
      if (data.indexOf("黄码数") !== -1) {
        total.push(this.Totaldata.yellowNum);
      }
      if (data.indexOf("红码数") !== -1) {
        total.push(this.Totaldata.redNum);
      }
      if (data.indexOf("待完善数") !== -1) {
        total.push(this.Totaldata.emptyNum);
      }
      console.log(total);
      return total;
    },
    handleCheckedCitiesChange(e) {
      // if (e.length == 6) {
      //   this.queryInfo.responsegroups.pop();
      //   this.$error("最多只允许查询5个统计口径");
      // } else
      // if (e.length == 0) {
      //   this.queryInfo.responsegroups.push("1");
      // }
    },
    handleCheckedChange(e) {
      if (e.length == 0) {
        this.queryInfo.groups.push("1");
      }
    },
    handleCityChange(e) {
      if (e.length == 0) {
        this.queryInfo.districtcode.push("320500");
      } else if (e.length > 1) {
        this.queryInfo.districtcode = e.filter((x) => x != "320500");
      }
    },
    onCascaderChange(e) {
      if (e.length == 2) {
        this.queryInfo.bodyindustry = [e[0]];
        this.queryInfo.bodyindustryRemarks = [e[1]];
      } else if (e.length == 1) {
        this.queryInfo.bodyindustry = [e[0]];
        this.queryInfo.bodyindustryRemarks = [];
      } else {
        this.queryInfo.bodyindustry = [];
        this.queryInfo.bodyindustryRemarks = [];
      }
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  width: 100%;
  padding: 20px;
  /deep/ .el-select {
    margin-bottom: 10px;
    margin-right: 10px;
  }
 /deep/ .el-cascader {
    margin-bottom: 10px;
    margin-right: 10px;
  }
  
  /deep/ .export-excel-wrapper {
    margin-left: 10px;
    display: inline-block;
  }
  .paginations {
    padding-top: 10px;
    text-align: right;
  }
  .selectwidth {
    width: 150px;
  }
  .table {
    display: flex;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    overflow: auto;
    .header {
      flex: 1;
      text-align: center;
      min-width: 160px;
    }
    .title {
      padding: 12px;
      // overflow: hidden;
      border-left: 1px solid #ccc;
      border-top: 1px solid #ccc;
    }
    .td {
      flex: 2;
      min-width: 500px;
    }
    .header_title > .title {
      font-weight: 600;
      background-color: #f5f7fa;
    }
  }
  .empty {
    padding: 10px;
    text-align: center;
  }
}
</style>